<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>后盾人</title>
  </head>
  <body>
    <style>
      body {
        padding: 30px;
      }
      #hd {
        height: 30px;
        background: yellowgreen;
        width: 0;
        text-align: center;
        font-weight: bold;
      }
    </style>
    <div id="hd"></div>
  </body>
  <script>
    function handle() {
      let i = 0;
      (function run() {
        hd.innerHTML = i;
        hd.style.width = i + "%";
        if (++i <= 100) {
          setTimeout(run, 20);
        }
      })();
    }
    handle();
  </script>
</html>
